<template>
	<div class="goodsInfo">
		<!-- 加入购物车小球动画 -->
		<transition  @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
					<div class="ball" v-show="flag" ref="ball"></div>
					</transition>
		<!-- 轮播图 -->
		<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<swipper-com :lunboList="lunboList" :isfull="false"></swipper-com>
						</div>
					</div>
		</div>
		<!-- 购买情况 -->
		<div class="mui-card">
			<div class="mui-card-header">{{goodsInfo.title}}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价：&nbsp<del>￥{{goodsInfo.market_price}}</del>
						&nbsp &nbsp销售价：<span class="now">￥{{goodsInfo.sell_price}}</span>
					</p>
					<p class="num">购买数量：	
						<num-box @func="getGoodsNum" 

				:max="goodsInfo.stock_quantity" >
							
						</num-box></p>
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small"  @click="addCart" ref="addCartButton">加入购物车</mt-button>
				</div>
			</div>
		</div>
		<!-- 商品参数 -->
		<div class="mui-card goodsParam">
					<div class="mui-card-header">商品参数</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<p>商品货号：{{goodsInfo.goods_no}}</p>
							<p>库存情况：{{goodsInfo.stock_quantity}}</p>
							<p>上架时间：{{goodsInfo.add_time}}</p>
						</div>
					</div>
					<div class="mui-card-footer ">
						<mt-button type="primary" plain size="large" @click="goGoodsDesc">图文介绍</mt-button>
						<mt-button type="danger" plain  size="large" @click="goGoodsComment">商品评价</mt-button>
					</div>
		</div>
	</div>
			
</template>
<style lang="scss" scoped>
	.goodsInfo{
		.ball{
	 		width: 15px;
			height:15px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			z-index: 999;
			left:150px;
			top:405px;
			
	 	}
		
	 .price{
		.now{
			color:red;
			font-size: 14px;
		}
	 }
	 .num{
	 	position: relative;
	 	
	 }
	 .goodsParam{
	 	.mui-card-footer {
	 		flex-wrap:wrap;
	 		button{
	 			margin:10px 0px;
	 		}
	 	}
		
	 }

	}
</style>
<script>
	//导入轮播图组件
	 import swipper from '../subComponents/swipper.vue'
	 //导入购买数量组件
	 import numbox from '../subComponents/numbox.vue'
	export default{
		data:function(){
			return{
				lunboList:[],
				// 获取商品的id
				id:this.$route.params.id,
				// 商品描述数组
				goodsInfo:[],
				flag:false,
				addCartNum:1
			};
		},
		methods:{
			getLunboList(){
				this.$http.get('api/getthumimages/'+this.id).then(result =>{
					if(result.body.status==0)
					{	result.body.message.forEach(item=>{
						item.img = item.src;
						});
						this.lunboList = result.body.message;
					}
				});
			},
			// 获取商品的参数和价格
			getGoodsInfo(){
				this.$http.get('api/goods/getinfo/'+this.id).then(
					result=>{
						if(result.body.status==0)
						{
							this.goodsInfo = result.body.message[0];
						}
					});

			},
			//去商品描述页面
			goGoodsDesc(){
				this.$router.push({name:'goodsDesc',params: { id :this.id}});

			},
			// 去商品评论页面
			goGoodsComment(){
		
				this.$router.push({name:'goodsComment',params: { id:this.id}});
			},
			//获取子组件传递给父组件的数据,numbox的商品数量，传给goodsInfo
			getGoodsNum(num){
				this.addCartNum = num;
				console.log('父组件获取子组件的数字框的值：'+num);
			},
			//点击加入购物车
			addCart(){

				this.flag =!this.flag;
				var goods_info ={
					id:this.id,
					price:this.goodsInfo.sell_price,
					num:this.addCartNum,
					selected:true
				};
				//把商品信息保存在 state中，要交给 store的mutations的方法来做
				this.$store.commit('saveGoodsInfo',goods_info);
				//将cart的信息保存到localstorage
				localStorage.setItem("cart",JSON.stringify(this.$store.state.cart));
				//id 去取商品的数量 和 库存进行比较
				this.$store.state.cart.some(item =>{
					
					if(item.id==this.id){
						if(item.num == this.goodsInfo.stock_quantity )
						{
							//禁用按钮
							this.$refs.addCartButton.style.disabled = 'disabled';
						}
					return true;
					}
				});
				
			},
			//小球的动画函数
			beforeEnter:function(el){

				el.style.transform = "translate(0px,0px)";
					
			},
			enter:function(el,done){

				el.offsetWidth //强制页面刷新
				// 获取购物车徽标的位置
				const badgePositon = document.getElementById('badge').getBoundingClientRect();
				//获取小球在页面的位置
				const ballPositon= this.$refs.ball.getBoundingClientRect();
				//得到小球和购物车在x轴上的距离差和y轴上的距离差
				const x = badgePositon.left - ballPositon.left;
				const y = badgePositon.top - ballPositon.top;	
				el.style.transform = `translate(${x}px,${y}px)`;
				el.style.transition = "all 1s ease";
						done();
				},
			afterEnter:function(el){
					this.flag = !this.flag;
			},
		},
		components:{
			'swipper-com':swipper,
			'num-box':numbox
		},
		created:function(){
			this.getLunboList();
			this.getGoodsInfo();

		},


	}
</script>
